<!--
 * @Author: 小花
 * @Date: 2022-04-23 11:48:30
 * @LastEditors: 小花
 * @LastEditTime: 2022-05-17 16:17:31
 * @FilePath: /vue3-teap/src/components/AddWorker.vue
 * @Description:
-->
<template>
  <el-drawer v-model="drawerVisible" direction="btt" size="85%">
    <template #title>
      <h4>新增维修员</h4>
    </template>
    <template #default>
      <div class="form">
        <el-form label-position="right" label-width="100px" :model="formData"
          style="max-width: 460px" :rules="FormRules" ref="ruleFormRef">
          <el-form-item prop="workerName" label="姓名">
            <el-input clearable v-model="formData.workerName" placeholder="姓名" />
          </el-form-item>
          <el-form-item prop="workerPhone" label="电话">
            <el-input clearable v-model="formData.workerPhone" placeholder="138 0000 0000" />
          </el-form-item>
          <el-form-item prop="workerEmail" label="邮箱">
            <el-input clearable type="email" v-model="formData.workerEmail"
              placeholder="sophie@example.com" />
          </el-form-item>
        </el-form>
      </div>
    </template>
    <template #footer>
      <div class="footer">
        <el-button @click="resetForm(ruleFormRef)">取消
        </el-button>
        <el-button type="primary" @click="confirmFormData(ruleFormRef)">
          新增
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs } from 'vue'
import AddWorkerData from '@/model/main/layout/dynamicNav/WorkerPage/AddWorker'
import { ElMessage, ElNotification, FormInstance } from 'element-plus'
import { addNewWorker } from '@/plugins/request/http'
import { responseEnum, responseUtil } from '@/plugins/request/responseUtil'
import { FormRules } from '@/model/main/layout/dynamicNav/WorkerPage'
import nProgress from 'nprogress'

export default defineComponent({
  name: 'AddWorker',
  setup () {
    const coreData = reactive(new AddWorkerData())

    const resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return
      formEl.resetFields()
      coreData.drawerVisible = false
    }

    const confirmFormData = async (formEl: FormInstance | undefined) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          execAddNewWorker()
        } else {
          let reason = '\n'
          Object.keys(fields as object).forEach((item, index) => {
            reason += `ErrorReason${index}: '${(fields as any)[item][0].fieldValue}'\n`
          })
          confirm(`添加信息存在错误, 请重新修改.${reason}`)
        }
      })
    }

    const execAddNewWorker = async () => {
      nProgress.start()
      const result = await (await addNewWorker(coreData.formData)).data as responseUtil
      if (result.code === responseEnum.OK) {
        resetForm(coreData.ruleFormRef)
        ElNotification.success({
          title: 'Success',
          message: result.msg
        })
      } else if (result.code !== responseEnum.NO_PERMISSION) {
        ElMessage.error(result.msg)
      }
      nProgress.done()
    }

    return {
      ...toRefs(coreData),
      resetForm,
      confirmFormData,
      FormRules
    }
  }
})
</script>

<style lang='scss' scoped>
@import '@/assets/scss/el-drawer.scss';
</style>
